<template>
    <!-- 编辑备注信息弹窗 -->
    <el-dialog title="编辑" :model-value="visible" width="520px" :fullscreen="mobile" @close="handleClose">
      <el-form :model="form" ref="fromRef" label-width="0">
        <el-form-item prop="remark">
          <el-input type="textarea" v-model="form.remark" :rows="4" maxlength="150" placeholder="请填写备注信息" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
</template>
<script setup>
import useAppStore from '@/store/modules/app'
import { watchEffect } from 'vue';

const emit = defineEmits()
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    remark: {
        type: String,
        default: ''
    }
})
const form = ref({
    remark: ''
})
watchEffect(() => {
    form.value.remark = props.remark
})
const mobile = computed(() => useAppStore().device === 'mobile')

function handleClose() {
    emit('cancel')
}
function handleOk() {
    if (props.remark === form.value.remark) {
        emit('cancel')
    } else {
        emit('ok', form.value)
    }
}
</script>